<template>
  <div class="index-content" id="my">
    <div class="banner">
      <div class="footerdw" v-for="(v,i) in img " :key="i">
        <img :src="v.url" v-show="i==n" />
        <span v-if="i==n">{{v.title}}</span>
      </div>
      <div class="banner-circle">
        <ul>
          <li v-for="(v,i) in img " @click="handle(i)" :key="i" :class="i==n ?'selected':''">
            <span>{{i+1}}</span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      img: [
        {
          id: 0,
          title: "我是图片描述1",
          url:
            "https://tse1-mm.cn.bing.net/th/id/OIP.JK82PTMecoHr4w5wlzYUNwHaFp?w=237&h=181&c=7&o=5&dpr=2&pid=1.7",
        },
        {
          id: 1,
          title: "我是图片描述2",
          url:
            "https://tse4-mm.cn.bing.net/th/id/OIP.XubvGDFI0vWNeiH4XtWU6AHaFq?w=237&h=181&c=7&o=5&dpr=2&pid=1.7",
        },
        {
          id: 2,
          title: "我是图片描述3",
          url:
            "https://tse3-mm.cn.bing.net/th/id/OIP.OVOrGmI5qqBwJdsSH24FdgHaF7?w=226&h=181&c=7&o=5&dpr=2&pid=1.7",
        },
        {
          id: 3,
          title: "我是图片描述4",
          url:
            " https://tse2-mm.cn.bing.net/th/id/OIP.nUMhM--YE824t5rf0nIjVwHaEo?w=278&h=180&c=7&o=5&dpr=2&pid=1.7",
        },
      ],

      n: 0,
      timer: null,
    };
  },
  //生命周期 - 创建完成
  created() {},

  //DOM挂载完毕
  mounted() {
    this.fun();
  },
  methods: {
    handle(index) {
      //   console.log(index)
      clearInterval(this.timer);
      this.n = index;
      this.fun();
    },
    fun: function () {
      //setInterval(函数体,时间)
      this.timer = setInterval(this.play, 3500);
    },
    play: function () {
      this.n++;
      if (this.n == this.img.length) {
        this.n = 0;
      }
    },
  },
};
</script>

<style lang='less' scoped>
/*index*/
.index-content .banner {
  position: relative;
}
.index-content .banner .banner-circle {
  width: 100%;
  position: absolute;
  bottom: 0px;
  left: 0;
  right: 0;
  color: #fff;
}
.index-content .banner .banner-circle li {
  cursor: pointer;
  //   display: flex;
  //   justify-content: space-between;
  //   align-items: center;
  display: inline-block;
  background: #016c9d;
  width: 15px;
  height: 15px;
  font-size: 12px;
  margin-left: 8px;
  //   border-radius: 50%;
  //   padding: 5px;
  //   margin: 2px;
}

.banner .footerdw span {
  position: absolute;
  left: 5px;
  bottom: 0px;
  display: block;
  height: 47px;
  line-height: 47px;
  z-index: 999;
  color: #fff;
  font-size: 14px;
}

.index-content .banner .banner-circle ul {
  padding-right: 20px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  text-align: center;
  height: 46px;
  // width: 100%;
  background-color: rgba(0, 0, 0, 0.4);
}
.index-content .banner .banner-circle .selected {
  background: #fcbe52;
}
.index-content .banner img {
  width: 100%;
  height: 285px;
  margin: 0;
  padding: 0;
}
/*index-category*/
.index-content .index-category {
  margin-top: 5%;
}
.index-content .index-category .category {
  width: 50%;
  float: left;
  text-align: center;
}
.index-content .index-category .category .iconfont {
  font-size: 40px;
  display: inline-block;
  padding: 10%;
  border-radius: 50%;
  color: #fff;
  border: 3px solid #f9f9f9;
  box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.5);
}
.index-content .index-category .category .iconfont {
  background: #92d85c;
}
.index-content .index-category .category:nth-child(2) .iconfont {
  background: #f60;
}
.index-content .index-category .category:nth-child(4) .iconfont {
  background: #f00;
}
.index-content .index-category .category label {
  display: block;
  padding: 10% 0;
  color: #999;
}
/*index-category end*/
</style>
